<template>
  <view>
    <swiper class="list-box" :current="currentTab" @change="changeSwiper">
      <swiper-item>
        <scroll-view scroll-y style="height: calc(100vh - 36px);" @scrolltolower="scrolltolower()">
          <view v-for="(item, index) in listData" :key="item.id" class="line-box" :style="{ marginTop: index===0?'-10rpx':'-20rpx', backgroundImage: `url('https://img.qumoyugo.com/img/P9F9FEAYIYMEEGSHIQN81688720571261.png')`}">
            <Coupon :data="item" :index="index" :url="'/pages/eventsList'"></Coupon>
          </view>
          <view class="no-data" v-if="pagination.total === 0 && !pagination.more">
            <EmptyBox title="暂无数据哦～" img="https://img.qumoyugo.com/webimgbg/pets-no-data-product.png">
            </EmptyBox>
          </view>
          <view class="no-more" v-if="pagination.total > 8 && !pagination.more">
             -没有更多了-
          </view>
        </scroll-view>
      </swiper-item>
      <!--洗护-->
      <swiper-item>
        <scroll-view scroll-y style="height: calc(100vh - 36px);" @scrolltolower="scrolltolower()">
          <view v-for="(item, index) in listData" :key="item.id" class="line-box" :style="{ marginTop: index===0?'-10rpx':'-20rpx', backgroundImage: `url('https://img.qumoyugo.com/img/QA6VQV63ZSX3E0YVEJEF21691048017025.png')`}">
            <Coupon :data="item" :index="index" :url="'/user/toiletry/introduce'"></Coupon>
          </view>
          <view class="no-data" v-if="pagination.total === 0 && !pagination.more">
            <EmptyBox title="暂无数据哦～" img="https://img.qumoyugo.com/webimgbg/pets-no-data-product.png">
            </EmptyBox>
          </view>
          <view class="no-more" v-if="pagination.total > 8 && !pagination.more">
            -没有更多了-
          </view>
        </scroll-view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app'
import Coupon from '@/components/list/coupon'
import EmptyBox from '@/components/emptyBox'
import { ref, getCurrentInstance } from 'vue'
const { $https } = getCurrentInstance().appContext.config.globalProperties
const listData = ref([])
const pagination = ref({
  page: 0,
  more: true,
  total: 0
})
const currentTab = ref('')
const pageOption = ref({})
onLoad((option) => {
  pageOption.value = option
  currentTab.value = option.type
  // initData()
})
const scrolltolower = () => {
  if (pagination.value.more) {
    initData()
  }
}
const initData = () => {
  $https({
    url: '/app/couponInfo/getCouponList',
    type: '',
    data: {
      couponType: currentTab.value,
      page: pagination.value.page + 1,
      pageSize: 10
    }
  }).then(res => {
    if (res.code === 0) {
      listData.value.push(...res.data.items)
      pagination.value = {
        page: res.data.pagination.page,
        total: res.data.pagination.total_record,
        more: res.data.pagination.more
      }
    }
  })
}

const changeSwiper = (e) => {
  currentTab.value = 1
  pagination.value.page = 0
  listData.value = []
  initData()
}
</script>

<style scoped lang="scss">
.top-bar {
  width: 750rpx;
  height: 121rpx;
  padding: 35.42rpx 156.25rpx;
  display: flex;
  justify-content: space-between;
  position: sticky;
  top: 0;
  .item{
    position: relative;
    text-align: center;
    width: 85rpx;
    height: 27rpx;
    font-size: 28rpx;
    font-weight: bold;
    color: #999999;
    line-height: 14rpx;
    &.current {
      height: 27rpx;
      font-size: 28rpx;
      font-weight: bold;
      color: #333333;
      line-height: 14rpx;
      &::after{
        width: 85rpx;
        height: 6rpx;
        background: #EE751E;
        border-radius: 3rpx;
        bottom: -13.89rpx;
        content: '';
        left: 50%;
        position: absolute;
        transform: translate(-50%, 0);
      }
    }
  }
}
.line-box{
  width: 733.33rpx;
  height: 202.92rpx;
  background-size: 100% 100%;
  &:last-child{
    border-bottom: none;
  }
}
.list-box{
  min-height: calc(100vh - 36px);
  background: #F4F4F4;
  padding: 9.03rpx 8.33rpx 0 8.33rpx;
}
.no-data{
  margin-top: 30%;
  text-align: center;
}
.no-more{
  text-align: center;
  color: #999999;
  padding-top: 20rpx;
  padding-bottom: 30px;
}
</style>
